import UHeader from '@/components/mediatek/UHeader'
import { IconClose, IconMore } from '@douyinfe/semi-icons'
import {
  Form,
  Col,
  Row,
  Button,
  Space,
  Tabs,
  TabPane,
  RadioGroup,
  Table,
  Input,
  Select,
  Checkbox,
  Descriptions,
} from '@douyinfe/semi-ui'

const StyleDiv = styled.div`
  .semi-form-field-label-text,
  .semi-checkbox-addon,
  .semi-select-selection,
  .semi-radio-addon {
    font-size: 12px;
  }
`

const page = () => {
  const [value, setValue] = useState(1)

  const columns = [
    {
      title: 'Partition Name',
      dataIndex: 'name',
    },
    {
      title: 'Start Address',
      dataIndex: 'a',
    },
    {
      title: 'End Address',
      dataIndex: 'b',
    },
    {
      title: 'Size',
      dataIndex: 'c',
    },
  ]
  const data = [
    {
      key: '1',
      name: '',
      a: '',
      b: '',
      c: '',
    },
    {
      key: '2',
      name: '',
      a: '',
      b: '',
      c: '',
    },
    {
      key: '3',
      name: '',
      a: '',
      b: '',
      c: '',
    },
    {
      key: '4',
      name: '',
      a: '',
      b: '',
      c: '',
    },
    {
      key: '5',
      name: '',
      a: '',
      b: '',
      c: '',
    },
    {
      key: '6',
      name: '',
      a: '',
      b: '',
      c: '',
    },
  ]

  return (
    <StyleDiv>
      <Tabs
        type="line"
        size="small"
        defaultActiveKey="6"
        lazyRender
        collapsible
        style={{ width: 'calc(100vw - 256px)' }}
      >
        <TabPane tab="Services" itemKey="1">
          <UHeader>
            <RadioGroup
              direction="vertical"
              defaultValue={0}
              options={[
                { label: 'Read Info', value: 0 },
                { label: 'Reset FRP | Erase Method', value: 1 },
                { label: 'Reset FRP | Write Method', value: 2 },
                { label: 'Format | Factory Reset - Safe', value: 3 },
                { label: 'Format | Factory Reset - Userdata', value: 4 },
                { label: 'Factory Reset | FRP - Safe', value: 5 },
                { label: 'Factory Reset | FRP - Liserdata', value: 6 },
                { label: 'Reset MI Account | No Relock', value: 7 },
                { label: 'Fix DL-Image Error', value: 8 },
              ]}
            ></RadioGroup>
            <div className="py-5">
              <Button theme="solid" size="large" type="primary">
                Do Selected
              </Button>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="Flasher" itemKey="2">
          <UHeader>
            <div className="flex flex-col">
              <div>
                <Space spacing="loose">
                  <span>Control</span>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Method-1', value: 0 },
                      { label: 'Method-2', value: 1 },
                    ]}
                  ></RadioGroup>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Select All', value: 0 },
                      { label: 'UnSelect All', value: 1 },
                    ]}
                  ></RadioGroup>
                </Space>
              </div>
              <div className="flex py-6">
                <div className="flex-1">
                  <div className="py-2">
                    <Input
                      placeholder="Select Scatter.txt file"
                      suffix={
                        <Button type="tertiary">
                          <IconMore className="px-2" />
                        </Button>
                      }
                    ></Input>
                  </div>
                  <Table columns={columns} dataSource={data} pagination={false} bordered />
                </div>
                <div className="w-[250px] py-2 pl-4 flex">
                  <Space vertical className="flex-1" spacing={20} align="start">
                    Flash Methods
                    <Select placeholder="Scatter.txt Firmware Flashing" style={{ width: '100%' }} showClear>
                      <Select.Option value={0}>AA</Select.Option>
                      <Select.Option value={1}>BBB</Select.Option>
                      <Select.Option value={2}>CCC</Select.Option>
                    </Select>
                    <Space wrap>
                      <Checkbox defaultChecked>High Speed Port</Checkbox>
                      <Checkbox>DA DL Checksum</Checkbox>
                      <Checkbox>Skip Nv Data</Checkbox>
                    </Space>
                    <Button theme="solid" size="large" type="primary" style={{ width: '100%' }}>
                      FLASH
                    </Button>
                  </Space>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="Backup Firmware" itemKey="3">
          <UHeader>
            <div className="flex flex-col">
              <div>
                <Space spacing="loose">
                  <span>Control</span>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Method-1', value: 0 },
                      { label: 'Method-2', value: 1 },
                    ]}
                  ></RadioGroup>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Select All', value: 0 },
                      { label: 'UnSelect All', value: 1 },
                    ]}
                  ></RadioGroup>
                </Space>
              </div>
              <div className="flex py-6">
                <div className="flex-1">
                  <Table columns={columns} dataSource={data} pagination={false} bordered />
                </div>
                <div className="w-[250px] pl-4 flex">
                  <Space vertical className="flex-1" spacing={20} align="start">
                    Backup Options
                    <Select placeholder="Auto Scatter Firnware Backup" style={{ width: '100%' }} showClear>
                      <Select.Option value={0}>AA</Select.Option>
                      <Select.Option value={1}>BBB</Select.Option>
                      <Select.Option value={2}>CCC</Select.Option>
                    </Select>
                    <Space wrap>
                      <Checkbox defaultChecked>Read Small Userdata</Checkbox>
                      <Checkbox>Read Full Userdata</Checkbox>
                      <Checkbox>Skip Userdata</Checkbox>
                    </Space>
                    <Button theme="solid" size="large" type="primary" style={{ width: '100%' }}>
                      FLASH
                    </Button>
                  </Space>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="Partition Manager" itemKey="4">
          <UHeader>
            <div className="flex flex-col">
              <div>
                <Space spacing="loose">
                  <span>Control</span>
                  {/* <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Method-1', value: 0 },
                      { label: 'Method-2', value: 1 },
                    ]}
                  ></RadioGroup> */}
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Select All', value: 0 },
                      { label: 'UnSelect All', value: 1 },
                    ]}
                  ></RadioGroup>
                </Space>
              </div>
              <div className="flex py-6">
                <div className="flex-1">
                  <Table
                    columns={[
                      {
                        title: 'Partition Name',
                        dataIndex: 'name',
                      },
                      {
                        title: 'Start Address',
                        dataIndex: 'a',
                      },
                      {
                        title: 'End Address',
                        dataIndex: 'b',
                      },
                      {
                        title: 'Size',
                        dataIndex: 'c',
                      },
                      {
                        title: 'File Path',
                        dataIndex: 'd',
                      },
                    ]}
                    dataSource={data}
                    pagination={false}
                    bordered
                  />
                </div>
                <div className="w-[250px] pl-4 flex">
                  <Space vertical className="flex-1" spacing={20} align="start">
                    <RadioGroup
                      defaultValue={0}
                      direction="vertical"
                      options={[
                        { label: 'List Paritions', value: 0 },
                        { label: 'Backup Selected', value: 1 },
                        { label: 'Write Selected', value: 2 },
                        { label: 'Wipe Selected', value: 3 },
                      ]}
                    ></RadioGroup>
                    <Button theme="solid" size="large" type="primary" style={{ width: '100%' }}>
                      Do Selected
                    </Button>
                  </Space>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="Read | Restore Dump" itemKey="5">
          <UHeader>
            <div className="flex flex-col">
              <div>
                <Space spacing="loose">
                  <span>Control</span>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Method-1', value: 0 },
                      { label: 'Method-2', value: 1 },
                    ]}
                  ></RadioGroup>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Select All', value: 0 },
                      { label: 'UnSelect All', value: 1 },
                    ]}
                  ></RadioGroup>
                </Space>
              </div>
              <div className="flex py-6 flex-col">
                <RadioGroup
                  direction="vertical"
                  defaultValue={0}
                  options={[
                    { label: 'Read DUMP', value: 0 },
                    { label: 'Restore DUMP', value: 1 },
                  ]}
                ></RadioGroup>
                <div className="py-5">
                  <Button theme="solid" size="large" type="primary">
                    Do Selected
                  </Button>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="IMEI | Repair" itemKey="6">
          <UHeader>
            <Tabs type="card" size="small" lazyRender defaultActiveKey="3">
              <TabPane tab="Xiaomi IMEI Repair" itemKey="1">
                <div className="py-4  w-[350px]">
                  <Descriptions align="left">
                    <Descriptions.Item itemKey="EFS">
                      <Select defaultValue={0} className="w-full">
                        <Select.Option value={0}>EFS Method</Select.Option>
                        <Select.Option value={1}>Enter 14 digit I...</Select.Option>
                        <Select.Option value={2}>0000000</Select.Option>
                      </Select>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="IMEI 1">
                      <Input placeholder="Enter 14 digit I..." showClear></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="IMEI 2">
                      <Input placeholder="Enter 14 digit I..." showClear></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="">
                      <Button theme="solid" type="primary" className="w-full">
                        Write IMEI
                      </Button>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="">
                      IMEI Changing is illegal Use this function to restore orginal IMEI
                    </Descriptions.Item>
                  </Descriptions>
                </div>
              </TabPane>
              <TabPane tab="Vivo IMEI Repair" itemKey="2">
                <div className="py-4 w-[350px]">
                  <Descriptions align="left">
                    <Descriptions.Item itemKey="IMEI 1">
                      <Input placeholder="Enter 14 digit I..." showClear></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="IMEI 2">
                      <Input placeholder="Enter 14 digit I..." showClear></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="">
                      <Button theme="solid" type="primary" className="w-full">
                        Write IMEI
                      </Button>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="">
                      <Button theme="solid" type="primary" className="w-full">
                        Read IMEI
                      </Button>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="">
                      IMEI Changing is illegal Use this function to restore orginal IMEI
                    </Descriptions.Item>
                  </Descriptions>
                </div>
              </TabPane>
              <TabPane tab="Generic IMEI Repair" itemKey="3">
                <div className="py-4 w-[350px]">
                  <Descriptions align="left">
                    <Descriptions.Item itemKey="IMEI 1">
                      <Input placeholder="Enter 14 digit I..." showClear></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="IMEI 2">
                      <Input placeholder="Enter 14 digit I..." showClear></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="">
                      <Button theme="solid" type="primary" className="w-full">
                        Write IMEI
                      </Button>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="">
                      <Button theme="solid" type="primary" className="w-full">
                        Read IMEI
                      </Button>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="">
                      IMEI Changing is illegal Use this function to restore orginal IMEI Xiaomi and OPPO Not Supported
                      by this method!
                    </Descriptions.Item>
                  </Descriptions>
                </div>
              </TabPane>
              <TabPane tab=" IMEI Repair | Meta Mode" itemKey="4">
                <div className="py-4 w-[350px]">
                  <Descriptions align="left">
                    <Descriptions.Item itemKey="FLE">
                      <Input
                        placeholder="Select Database file"
                        addonAfter={
                          <Button>
                            <IconMore className="px-2" />
                          </Button>
                        }
                      ></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="IMEI 1">
                      <Input placeholder="Enter 14 digit I..." showClear></Input>
                    </Descriptions.Item>

                    <Descriptions.Item itemKey="IMEI 2">
                      <Input placeholder="Enter 14 digit I..." showClear></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="">
                      <div className="py-4">
                        <Checkbox defaultChecked>Auto Load DB file</Checkbox>
                      </div>
                      <Button theme="solid" type="primary" className="w-full">
                        Write IMEI
                      </Button>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="">
                      IMEI Changing is illegal Use this function to restore orginal IMEI
                    </Descriptions.Item>
                  </Descriptions>
                </div>
              </TabPane>
            </Tabs>
          </UHeader>
        </TabPane>
        <TabPane tab="Download MODE" itemKey="7">
          <UHeader>
            <div className="flex">
              <div className="flex flex-col">
                <RadioGroup
                  direction="vertical"
                  defaultValue={0}
                  options={[
                    { label: 'Read Info', value: 0 },
                    { label: 'Reset FRP', value: 1 },
                    { label: 'Format | Factory Reset - New Sec', value: 2 },
                  ]}
                ></RadioGroup>
                <div className="py-5">
                  <Button theme="solid" size="large" type="primary">
                    Do Selected
                  </Button>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="MTP Utility" itemKey="8">
          <UHeader>
            <div className="flex">
              <div className="flex flex-col">
                <RadioGroup
                  direction="vertical"
                  defaultValue={0}
                  options={[
                    { label: 'Read Info', value: 0 },
                    { label: 'Format | Factory Reset - Generic', value: 1 },
                    { label: 'Factory Reset | Without data loss - OPPO', value: 2 },
                  ]}
                ></RadioGroup>
                <div className="py-5">
                  <Button theme="solid" size="large" type="primary">
                    Do Selected
                  </Button>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="OPPO OFP Extractor" itemKey="9">
          <UHeader>
            <div className="flex flex-col">
              <div>
                <Space spacing="loose">
                  <span>Control</span>
                  {/* <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Method-1', value: 0 },
                      { label: 'Method-2', value: 1 },
                    ]}
                  ></RadioGroup> */}
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Select All', value: 0 },
                      { label: 'UnSelect All', value: 1 },
                    ]}
                  ></RadioGroup>
                </Space>
              </div>
              <div className="flex py-6">
                <div className="flex-1">
                  <div className="py-2">
                    <Input
                      placeholder="Select Scatter.txt file"
                      suffix={
                        <Button type="tertiary">
                          <IconMore className="px-2" />
                        </Button>
                      }
                    ></Input>
                  </div>
                  <Table
                    columns={[
                      {
                        title: 'Partition',
                        dataIndex: 'name',
                      },
                      {
                        title: 'File Name',
                        dataIndex: 'a',
                      },
                      {
                        title: 'Start Address',
                        dataIndex: 'b',
                      },
                      {
                        title: 'Size Address',
                        dataIndex: 'c',
                      },
                    ]}
                    dataSource={data}
                    pagination={false}
                    bordered
                  />
                </div>
                <div className="w-[250px] pl-4 flex">
                  <Space vertical className="flex-1" spacing={20} align="start">
                    <Button theme="solid" size="large" type="primary" style={{ width: '100%' }}>
                      Extract
                    </Button>
                  </Space>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="Android" itemKey="10">
          <UHeader>
            <div className="flex">
              <div className="flex flex-col">
                <RadioGroup
                  direction="vertical"
                  defaultValue={0}
                  options={[
                    { label: 'Read Info', value: 0 },
                    { label: 'Disable OTA Update | VIVO', value: 1 },
                    { label: 'Disable OTA Update | OPPO / REALME', value: 2 },
                  ]}
                ></RadioGroup>
                <div className="py-5">
                  <Button theme="solid" size="large" type="primary">
                    Do Selected
                  </Button>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="MTP | Browser" itemKey="11">
          <UHeader>
            <div className="flex">
              <div className="flex flex-col">
                <RadioGroup
                  direction="vertical"
                  defaultValue={0}
                  options={[
                    { label: 'Read Info', value: 0 },
                    { label: 'Browser (YouTube)', value: 1 },
                    { label: 'Browser Server 1', value: 2 },
                    { label: 'Open Custom browser link', value: 3 },
                  ]}
                ></RadioGroup>

                <div className="py-5">
                  <Select defaultValue={0} style={{ width: '200px' }}>
                    <Select.Option value={0}>Enter custom browser link</Select.Option>
                    <Select.Option value={1}>AA</Select.Option>
                    <Select.Option value={2}>BB</Select.Option>
                  </Select>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
      </Tabs>
    </StyleDiv>
  )
}

export default page
